import {} from '@/utils/DomUtil';
import { useEffect, useRef } from 'react';
import styled from 'styled-components';
import DodgeUtil from './DodgeUtil';

const DodgeEffectLayout = styled.div`
  position: relative;

  div {
    position: absolute;
    width: 200px;
    height: 100px;
    background: #fff;
  }
  .div1 {
    top: 100px;
    left: 270px;
    background: red;
  }
  .div2 {
    top: 50px;
    left: 240px;
    background: blue;
  }
  .div3 {
    top: 75px;
    left: 300px;
    background: yellow;
  }
`;

export const DodgeEffect = () => {
  const dodgeRef = useRef<any>(null);

  useEffect(() => {
    if (dodgeRef?.current) {
      DodgeUtil.init(dodgeRef.current);
    }
  }, []);

  return (
    <DodgeEffectLayout ref={dodgeRef}>
      <div
        className="div1"
        onClick={(e) =>
          DodgeUtil.change(e, dodgeRef?.current as HTMLDivElement)
        }></div>
      <div
        className="div2"
        onClick={(e) =>
          DodgeUtil.change(e, dodgeRef?.current as HTMLDivElement)
        }></div>
      <div
        className="div3"
        onClick={(e) =>
          DodgeUtil.change(e, dodgeRef?.current as HTMLDivElement)
        }></div>
    </DodgeEffectLayout>
  );
};
